import { useEffect, useState } from 'react'
import { useLocation, Link } from 'react-router-dom'
import { Table, Card, Breadcrumb, Tag, Space, Button } from 'antd'
import { getDataByName } from '@/apis/dataset'
import {
  ExportOutlined
} from '@ant-design/icons'
import { ExportExcel, paginationConfig } from "@/utils"

import './index.scss'

const DataDetail = () => {
  const location = useLocation()
  const queryParams = new URLSearchParams(location.search)
  const filename = queryParams.get('filename')
  const c_num = queryParams.get('c_num')
  const titlename = queryParams.get('title_name')
  const file_type = queryParams.get('file_type')


  const columns1 = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
      width: 150,
      fixed: 'left',
      ellipsis: true,
      render: (text) => text === 0 ? <div>配送中心</div> : <div>客户{text}</div>,
      style: {
        fontSize: 16
      }
    }
  ]
  const generateColumns = (c_num) => {
    for (let i = 0;i <= c_num;i++) {
      if (i === 0) {
        columns1.push({
          title: <div>配送中心</div>,
          dataIndex: `value${i + 1}`,
          align: 'center',
          key: `value${i}`,
          width: 120,
          ellipsis: true,
          render: (text) => <div>{text}</div>,
          style: {
            fontSize: 16
          }
        })
      }
      else {
        columns1.push({
          title: <div>客户{i}</div>,
          dataIndex: `value${i + 1}`,
          align: 'center',
          key: `value${i}`,
          width: 120,
          render: (text) => <div>{text}</div>,
          style: {
            fontSize: 16
          }
        })
      }
    }
  }
  generateColumns(c_num)

  const columns2 = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
      width: 150,
      fixed: 'left',
      ellipsis: true,
      render: (text) => text === 0 ? <div>配送中心</div> : <div>客户{text}</div>
    },
    {
      title: 'x坐标',
      dataIndex: 'x',
      key: 'x',
      align: 'center',
      width: 150,
      ellipsis: true
    },
    {
      title: 'y坐标',
      dataIndex: 'y',
      key: 'y',
      align: 'center',
      width: 150,
      ellipsis: true
    },
    {
      title: '送货量',
      dataIndex: 'demand',
      key: 'demand',
      align: 'center',
      width: 150,
      ellipsis: true
    },
    {
      title: '取货量',
      dataIndex: 'pick',
      key: 'pick',
      align: 'center',
      width: 150,
      ellipsis: true
    },
    {
      title: '开始服务时间',
      dataIndex: 'start',
      key: 'start',
      align: 'center',
      width: 150,
      ellipsis: true
    },
    {
      title: '结束服务时间',
      dataIndex: 'end',
      key: 'end',
      align: 'center',
      width: 150,
      ellipsis: true
    },
    {
      title: '服务时间',
      dataIndex: 'server',
      key: 'server',
      align: 'center',
      width: 150,
      ellipsis: true
    },
  ]


  const processedData = (data) => {
    if (data) {
      return data.map((row, rowIndex) => {
        let rowData = {
          key: rowIndex,
          id: rowIndex
        }
        row.forEach((item, itemIndex) => {
          rowData[`value${itemIndex + 1}`] = item
        })
        return rowData
      })
    }
  }

  const processedData2 = (data) => {
    if (data) {
      return data.map((row, rowIndex) => {
        let rowData = {
          key: rowIndex,
          id: rowIndex,
          x: row[1],
          y: row[2],
          demand: row[3],
          pick: row[4],
          start: row[5],
          end: row[6],
          server: row[7]
        }
        return rowData
      })
    }
  }

  const [data, setData] = useState([])
  const [vehicleNum, setvehicleNum] = useState([])
  const [maxCapacity, setmaxCapacity] = useState([])
  useEffect(() => {
    async function getData () {
      const res = await getDataByName(filename, c_num, file_type)
      if (file_type !== '3') {
        const dataset = processedData(res)
        setData(dataset)
      } else {
        const dataset = processedData2(res.data)
        setData(dataset)
        setvehicleNum(res.vehicle_num)
        setmaxCapacity(res.max_capacity)
      }
    }
    getData()
  }, [filename])


  // 导出
  const exportExcel = () => {
    if (file_type !== '3') {
      ExportExcel(columns1, data, titlename)
    } else {
      ExportExcel(columns2, data, titlename)
    }
  }


  return (
    <div>
      <Card
        title={
          <Breadcrumb items={[
            { title: <Link to={'/'}>首页</Link> },
            { title: <Link to={'/dataset'}>数据集</Link> },
            { title: titlename },
          ]}
            className='breadcrumb'
          />
        }
      >
        <Space size={'large'}>
          <Button type='primary' onClick={exportExcel} icon={<ExportOutlined />}>导出表格</Button>
          {file_type === '3' && (
            <div>
              <Tag color="orange" className="tag" >车辆数量：{vehicleNum}</Tag>
              <Tag color="cyan" className="tag">车辆容量：{maxCapacity}</Tag>
            </div>
          )}

        </Space>
        <Table
          style={{
            marginTop: 10
          }}
          columns={file_type !== '3' ? columns1 : columns2}
          dataSource={data}
          pagination={paginationConfig}
          bordered={true}
          scroll={{
            y: 'calc(100vh - 400px)',
            x: 'max-content',
          }}
        ></Table>
      </Card>
    </div>
  )
}

export default DataDetail